<template>
	<view class="container">
		<view class="transfer-wrap">
			<view class="form-wrap">
				<view class="form-item">
					<label>可转赠贡献点</label>
					<view class="input">{{contribution}}</view>
				</view>
				<view class="form-item">
					<label>要转赠贡献点</label>
					<view class="input">
						<input type="text" v-model="form.contributionValue" placeholder="请输入贡献点" placeholder-style="pl"/>
					</view>
				</view>
				<view class="form-item">
					<label>转赠ID</label>
					<view class="input">
						<input type="text" v-model="form.accept_user_number" placeholder="请输入对方ID" placeholder-style="pl"/>
					</view>
				</view>
			</view>
			<button class="btn line-center" @tap='sureModal'>确认转赠</button>
		</view>
		<view class="wrap">
			<view class="title">转赠记录</view>
			<view class="list-wrap" v-if='list.length > 0'>
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="top line-v-center">
						<view>转赠ID {{item.accept_user_number}}</view>
						<view>-{{item.contribution_value}}</view>
					</view>
					<view class="b line-v-center">
						<view>{{item.create_time}}</view>
						<view>剩余{{item.user_remain}}</view>
					</view>
				</view>
				<loading :loadEnd='loadEnd' class="load-t"></loading>
			</view>
			<no-data v-else class="noData"></no-data>
		</view>
		<modal :showModal="showModal">
			<view class="transfer-modal animated"  :class="[showModal ? 'zoomIn':'zoomOut']">
				<view class="transfer-con">
					<view class="title">温馨提示</view>
					<view class="tip">转赠前需先确认对方ID一经转出无法退还</view>
					<button class="transfer-btn line-center" :disabled="isDisabled" :loading="isDisabled" @tap='toTransfer'>确认并转赠</button>
				</view>
				<uni-icons type="close" color="#fff" size="40" @tap="close"></uni-icons>
			</view>
		</modal>
	</view>
</template>

<script>
	const app = getApp();
	import modal from '../../components/modal/modal.vue';
	export default {
		components:{
			modal,
		},
		data() {
			return {
				showModal:false,
				contribution:0,
				form:{
					contributionValue:'',
					accept_user_number:''
				},
				isDisabled:false,
				page: 1,
				totalPage: 1,
				list: [],
				loadEnd: false,
			};
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			let that = this;
			if (that.page < that.totalPage) {
				this.loadEnd = false;
				that.page++;
				that.getList()
			} else {
				return;
			}
		},
		onPullDownRefresh() {
			this.reload();
			uni.stopPullDownRefresh()
		},
		methods:{
			reload(){
				this.contribution= '';
				this.form.contributionValue = '';
				this.form.accept_user_number = '';
				this.page = 1;
				this.totalPage = 1;
				this.list = [];
				this.loadEnd = false;
				this.getList();
			},
			getList(){
				const that = this;
				app.globalRequest({
					api:app.getApi().transfer.transferList,
					data:{
						page: that.page,
						limits: 15
					}
				}).then(res=>{
					if(res.code == 0){
						that.contribution = res.contribution;
						that.list = that.list.concat(res.data.data);
						that.totalPage = res.data.last_page;
						if (that.totalPage == that.page) {
							that.loadEnd = true;
						}
					}
				})
			},
			sureModal(){
				if(!this.form.contributionValue){
					uni.showToast({
						title:'请输入贡献点',
						icon:'none'
					})
					return;
				}
				if(!this.form.accept_user_number){
					uni.showToast({
						title:'请输入对方ID',
						icon:'none'
					})
					return;
				}
				this.showModal = true;
			},
			toTransfer(){
				this.isDisabled = true;
				app.globalRequest({
					api:app.getApi().transfer.contributionTransfer,
					method:'POST',
					data:this.form
				}).then(res=>{
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.showModal = false;
						this.reload();
						this.isDisabled = false;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.isDisabled = false;
					}
				})
			},
			close(){
				this.showModal = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		min-height: 100vh;
		background: #F5F7F9;
	}
	.transfer-wrap{
		background: #fff;
		padding:20rpx 24rpx 50rpx;
	}
	.form-wrap{
		.form-item{
			height: 88rpx;
			border-bottom: 2rpx solid #F6F6F6;
			display: flex;
			align-items: center;
			label{
				width: 168rpx;
				margin-right: 50rpx;
			}
			.input{
				flex:1;
				height: 100%;
				display: flex;
				align-items: center;
				input{
					width: 100%;
					height: 100%;
					font-size: 28rpx;
				}
			}
		}
	}
	.btn{
		width: 686rpx;
		height: 84rpx;
		background: #1C1C1C;
		border-radius: 42rpx;
		margin:74rpx auto 0;
		color: #fff;
		font-size: 32rpx;
	}
	.wrap{
		padding-top:42rpx;
		padding-bottom: 50rpx;
		.title{
			font-weight: bold;
			text-align: center;
		}
		.list-wrap{
			margin:42rpx 24rpx 0;
			.list-item{
				padding:24rpx 28rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				margin-bottom: 24rpx;
				.top{
					font-weight: bold;
					justify-content: space-between;
				}
				.b{
					font-size: 24rpx;
					color: #787878;
					margin-top:12rpx;
					justify-content: space-between;
				}
			}
		}
	}
	.transfer-modal{
		width: 500rpx;
		height: 566rpx;
		position: fixed;
		left:0;
		right:0;
		margin:auto;
		top:362rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.transfer-con{
			width: 500rpx;
			height: 408rpx;
			background: url(@/static/transfer-bg.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 18rpx;
			.title{
				font-weight: bold;
				font-size: 28rpx;
				color: #1E1E1E;
				text-align: center;
				padding-top:32rpx;
			}
			.tip{
				text-align: center;
				font-size: 24rpx;
				color: #575B66;
				padding:40rpx 130rpx 0;
				line-height: 40rpx;
			}
			.transfer-btn{
				width: 420rpx;
				height: 88rpx;
				background: #1C1C1C;
				border-radius: 44rpx;
				margin:auto;
				font-size: 32rpx;
				color:#fff;
				margin-top:100rpx;
			}
		}
	}

</style>
